<template>
    <div id="Content">
    <div id="Catalog" style="margin-top: -20px">
        <form action="/account/updateAccount" method="post">
            <h3 style="color:rgba(0,0,0,0.78); font-family: 'Arial Black';font-size: 25px;">User Information</h3>

            <table>
                <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                    <td>User ID:</td>
                    <td name="username">{{accountVO.username}}</td>
                </tr>
                <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                    <td>New password:</td>
                    <td><input type="password" name="password1"/></td>
                </tr>
                <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                    <td>Repeat password:</td>
                    <td><input type="password" name="password2"/></td>
                </tr>
            </table>
            <h3 style="color:rgba(0,0,0,0.78); font-family: 'Arial Black';font-size: 25px;">Account Information</h3>

        <table>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>First name:</td>
                <td><input type="text" name="firstName" th:value="${session?.account?.firstName}"/></td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Last name:</td>
                <td><input type="text" name="lastName" th:value="${session?.account?.lastName}"/></td>
            </tr >
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Email:</td>
                <td><input type="text" name="email" th:value="${session?.account?.email}"/></td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Phone:</td>
                <td><input type="text" name="phone" th:value="${session?.account?.phone}"/></td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Address 1:</td>
                <td><input type="text" name="address1" th:value="${session?.account?.address1}"/></td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Address 2:</td>
                <td><input type="text" name="address2" th:value="${session?.account?.address2}"/></td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>City:</td>
                <td><input type="text" name="city" th:value="${session?.account?.city}"/></td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>State:</td>
                <td><input type="text" name="state" th:value="${session?.account?.state}"/></td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Zip:</td>
                <td><input type="text" name="zip" th:value="${session?.account?.zip}"/></td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Country:</td>
                <td><input type="text" name="country" th:value="${session?.account?.country}"/></td>
            </tr>
        </table>

        <h3 style="color:rgba(0,0,0,0.78); font-family: 'Arial Black';font-size: 25px;">Profile Information</h3>

        <table>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Language Preference:</td>
                <td>
                    <select name="languagePreference">
                        <option value="English">English</option>
                        <option value="Japanese">Japanese</option>
                    </select>
                </td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Favourite Category:</td>
                <td>
                    <select name="favouriteCategoryId">
                        <option value="BIRDS">BIRDS</option>
                        <option value="CATS">CATS</option>
                        <option value="DOGS">DOGS</option>
                        <option value="FISH">FISH</option>
                        <option value="REPTILES">REPTILES</option>
                    </select>
                </td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Enable MyList</td>
                <td><input type="checkbox" name="listOption" value="yes"/></td>
            </tr>
            <tr style="font-family: 'Comic Sans MS';font-size: 18px">
                <td>Enable MyBanner</td>
                <td><input type="checkbox" name="bannerOption" value="yes"/></td>
            </tr>

        </table>
            <br>
            <input style="font-size: 20px" type="submit" name="editAccount" value="Save Account Information">
        </form>
        <p><font color=red th:text="${msg}">${sessionScope.msg}</font></p>
        <a style="font-size: 20px" class="Button" th:href="@{/cart/viewCart}">My Cart</a>
    </div>
</div>
</template>

<script>
    export default {
        name: "EditAccount",
        data(){
            return {
                accountVO:
                {
                    username: '',
                    password: ''
                }
            }
        },
        created()
        {
            const _this = this
            this.accountVO.username = localStorage.getItem("username")
            axios.get('http://localhost:8088/account/accounts/' + this.accountVO.username).then(function (resp) {
                _this.accountVO = resp.data.data.accountVO
            })
        }
    }
</script>

<style scoped>
    @import "../../assets/css/jpetstore.css";
</style>